<template>
	<view class="dmm-container dmm-container-grey">
		<text class="title">欢迎登录店喵喵代理商端</text>

		<view class="form">
			<u--form labelPosition="left" :model="loginInfo" labelWidth="170rpx" :rules="rules" ref="form">
				<u-form-item label="手机号" prop="phoneNo" borderBottom>
					<u--input v-model="loginInfo.phoneNo" type="number" placeholderStyle="color: #d7d7d7;" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="sms" borderBottom>
					<view class="countdown" slot="right">
						<u-code :seconds="seconds"  @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button :disabled="countdownDisabled" @tap="getCode" :text="tips"></u-button>
					</view>
					<u--input v-model="loginInfo.sms" placeholderStyle="color: #d7d7d7;" placeholder="请输入验证码" border="none"></u--input>
				</u-form-item>
			</u--form>

		</view>

		<u-button type="primary" text="登录" @click="submit"></u-button>
		<!-- #ifdef MP -->
		<u-button text="微信一键登录"></u-button>
		<!-- #endif -->

		<view class="" style="text-align: center;">
			<text class="text-primary" @click="uniHistory.push('/pages/register/index')">新用户注册</text>
		</view>

		<view class="foot">
			<text class="text">登录即代表同意</text>
			<view class="agreement">
				<text class="text-primary" @click="uniHistory.push('/pages/agreements/service')">《服务协议》</text>
				<text class="text-primary" @click="uniHistory.push('/pages/agreements/service')">和《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	import {getVerCode} from '@/apis/modules/login.js'
	import {uniHistory} from '@/common/utils.js'
	
	
	export default {
		data() {
			return {
				uniHistory,
				loginInfo: {
					phoneNo: '',
					sms: '',
				},
				rules: {
					phoneNo: {
						type: 'string',
						required: true,
						message: '手机号必填',
						trigger: ['blur']
					},
					sms: {
						type: 'string',
						required: true,
						message: '验证码必填',
						trigger: ['blur']
					},
				},
				
				tips: '',
				seconds: 60,
				countdownDisabled: false
			};
		},
		methods: {
			...mapActions('login', ['login']),
			
			submit() {
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					
					const {phoneNo, sms} = this.loginInfo
					this.login({phoneNo, sms})
				}).catch(errors => {
					uni.$u.toast('校验失败')
					console.log((errors))
				})	
			},
			
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				const {phoneNo} = this.loginInfo
				
				if(this.$refs.uCode.canGetCode && phoneNo) {
					getVerCode(phoneNo)
						.then(({error}) => !error && this.$refs.uCode.start())
				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			start() {
				this.countdownDisabled = true
			},
			
			end() {
				this.countdownDisabled = false
			},
			
			gotoRegister() {
				
			}
		}
	}
</script>

<style lang="scss">
	.dmm-container {
		box-sizing: border-box;
		padding-top: 162rpx;
	}
	
	.title {
		display: block;
		color: $u-primary;
		margin-bottom: 100rpx;
		text-align: center;
		font-size: 38rpx;
		font-weight: 700;
	}
	
	.u-form {
		background-color: #fff;
		margin: 0 30rpx 58rpx;
		border-radius: $uni-border-radius-lg;
		.u-form-item {
			padding: 0 30rpx;
			/deep/ .u-form-item__body__left__content__label {
				font-size: $uni-font-size-base;
				color: $uni-text-color-muted;
			}
		}
		.u-input {
			height: 88rpx;
			/deep/ .uni-input-input {
				color: $uni-text-color;
				font-size: $uni-font-size-base;
				font-weight: 700;
			}
		}
		
		.countdown {
			.u-button {
				height: 56rpx;
				line-height: 56rpx;
				width: 174rpx !important;
				padding: 0;
				margin: 0;
				font-size: 24rpx;
			}

		}
	}
	
	.u-button {
		width: 690rpx !important;
		margin: 0 30rpx 30rpx;
	}
	
	.text-primary {
		text-align: center;
	}
	
	.foot {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
		position: fixed;
		bottom: 30rpx;
	}
</style>
